<template>
    <div class="dailyFill">
        <div class="dailyFill-title">
            收运信息填报
        </div>
        <div class="dailyFill-wrap">
            <div class="baseinfo-box">
                <!-- 商铺名称 -->
                <div class="info-box">
                    <div class="label">商铺名称：</div>
                    <div class="value">万顺私宴</div>
                </div>
                <!-- 商铺地址 -->
                <div class="info-box">
                    <div class="label">商铺地址：</div>
                    <div class="value">上海市闵行区虹桥镇万源路2758号</div>
                </div>
                <div class="info-box">
                    <div class="label">联系人：</div>
                    <div class="value">罗顺玲</div>
                </div>
                <div class="info-box">
                    <div class="label">收运方式：</div>
                    <div class="value">
                        <div style="display: flex;">
                            <div class="method-box" :class="[0 == index ? 'method-active' : '']"
                                v-for="(item, index) in ['上门收运', '定点收运']" :key="index + item">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-box">
                    <div class="label">垃圾类别：</div>
                    <div class="value">干垃圾，湿垃圾，餐厨垃圾</div>
                </div>
            </div>
            <div class="dailyFill-form">
                <div class="time base-row">
                    <div class="label">收运时间</div>
                    <div class="name" @click="showTime = true">
                        <div class="picker-text">
                            {{ form.time ? form.time : '请选择' }}
                        </div>
                        <img :src="arrow" alt="">
                    </div>
                </div>
                <div class="time base-row">
                    <div class="label">收运数量</div>
                </div>
                <div class="rubbish-wrap">
                    <div class="rubbish-item base-row" v-for="(item, index) in rubbishList" :key="item.id">
                        <div class="left-box">
                            <div class="check" @click="onCheck(item, index)"
                                :class="[item.checked ? 'checkedBox' : 'checkBox']">
                                <img v-if="item.checked" :src="checked" alt="">
                            </div>
                            <div class="title">
                                {{ item.name }}(应收{{ item.expectCount }}桶)
                            </div>
                        </div>
                        <!-- 右边实际的清运数量 -->
                        <div class="right-box">
                            <div class="rubbish-count base-row">
                                <div class="label">实收</div>
                                <div class="name">
                                    <div class="input">
                                        <van-field v-model="item.atualCount" :disabled="!item.checked" type="number"
                                            class="count" />
                                    </div>
                                    <span>桶</span>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="location base-row">
                    <div class="label">收运坐标</div>
                    <div class="name" @click="showTime = true">
                        <div class="picker-text">
                            {{ form.location ? form.location : '请选择' }}
                        </div>
                        <img :src="point" alt="">
                    </div>
                </div>
                <!-- 保存取消 -->
                <div class="btn-wrap">
                    <div class="reset-btn btn">重置</div>
                    <div class="comfirm-btn btn">确认</div>
                </div>
            </div>
        </div>
        <!-- 时间选择器 -->
        <timePicker @changeValue="showTime = false" :showPicker="showTime" @confirm="onTime" />
    </div>
</template>

<script setup>
import { reactive, ref } from "vue"
import timePicker from "@/components/timePicker.vue"
import arrow from "@/assets/images/bottomarrow.png"
import checked from "@/assets/images/checked.png"
import point from "@/assets/images/point.png"
const form = reactive({
    time: "",
    location: ""
})
const showTime = ref(false)
const onTime = (val) => {
    form.time = val
}
const rubbishList = ref([
    {
        id: 1,
        name: '干垃圾',
        expectCount: "0.01",
        atualCount: 0,
        checked: true,
    },
    {
        id: 2,
        name: '湿垃圾',
        expectCount: "0.01",
        atualCount: 0,
        checked: true,
    },
    {
        id: 3,
        name: '餐厨垃圾',
        expectCount: "0.01",
        atualCount: 0,
        checked: true,
    }
])
const onCheck = (item, index) => {
    rubbishList.value[index].checked = !rubbishList.value[index].checked
}

</script>

<style lang="scss" scoped>
.dailyFill {
    overflow: hidden;
    height: calc(100vh - 92px - 88px);
    border-radius: 30px 30px 0px 0px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 1) 0%, rgba(241, 248, 255, 0) 100%);

    .dailyFill-title {
        margin: 26px 0 20px 24px;
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
    }

    .dailyFill-wrap {
        // height: 531px;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 30px 30px 0px 0px;
        background: rgba(255, 255, 255, 1);

        .info-box {
            margin-bottom: 20px;
            display: flex;
            align-items: center;

            .label {
                width: 160px;
                text-align: right;
                font-size: 26px;
                color: rgba(128, 128, 128, 1);

            }

            .value {
                font-size: 26px;
                color: rgba(51, 51, 51, 1);

                .method-box {
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 126px;
                    height: 48px;
                    font-size: 24px;
                    color: rgba(255, 255, 255, 1);
                    background: rgba(197, 207, 224, 1);
                }

                .method-active {
                    background: rgba(8, 173, 255, 1);
                }
            }
        }

        .dailyFill-form {
            .time {
                .name {
                    display: flex;
                    align-items: center;

                    .picker-text {
                        font-size: 26px;
                        color: rgba(193, 193, 193, 1);
                    }

                    img {
                        margin: 1px 0 0 3px;
                        width: 18px;
                        height: 10px;
                    }
                }
            }

            .location {
                .name {
                    display: flex;
                    align-items: center;

                    .picker-text {
                        font-size: 26px;
                        color: rgba(193, 193, 193, 1);
                    }

                    img {
                        margin: 1px 0 0 3px;
                        width: 30px;
                        height: 40px;
                    }
                }
            }

            .rubbish-wrap {

                .rubbish-item {
                    display: flex;

                    // justify-content: center;
                    .left-box {
                        display: flex;
                        align-items: center;

                        .checkBox {
                            border: 1px solid rgba(229, 229, 229, 1);
                        }

                        .checkedBox {
                            border: 1px solid rgba(50, 172, 237, 1);
                        }

                        .check {
                            margin-right: 16px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 28px;
                            height: 28px;
                            border-radius: 2px;

                            img {
                                width: 18px;
                                height: 14px;
                            }
                        }
                    }

                    .right-box {
                        .rubbish-count {
                            .name {
                                display: flex;
                                align-items: center;

                                .input {
                                    margin: 0 10px;
                                    width: 82px;
                                    // height: 28px;
                                    background: rgba(255, 255, 255, 1);
                                    border: 1px solid rgba(193, 193, 193, 1);

                                }
                            }

                        }
                    }
                }
            }

            .btn-wrap {
                display: flex;
                justify-content: flex-end;

                .reset-btn {

                    color: rgba(166, 166, 166, 1);
                    background: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(221, 221, 221, 1);
                }

                .comfirm-btn {
                
                    color: rgba(255, 255, 255, 1);
                    border-radius: 50px;
                    background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%), linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);

                }

                .btn {
                    margin: 50px 0 0 24px;
                    width: 144px;
                    height: 76px;
                    border-radius: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 28px;
                }
            }

        }
    }
}

.base-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 88px;
    box-shadow: inset 0px -2px 0px rgba(239, 239, 239, 1);
    font-size: 26px;
}

::v-deep(.van-cell) {
    padding: 0 4px !important;
}
</style>